<template>
    <el-dialog class="ba-operate-dialog" :destroy-on-close="true" :model-value="['orderDetails'].includes(baTable.form.operate!)" @close="baTable.toggleForm" width="77%" :style="{ height: '90vh',top:'-10vh !important'}">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? '订单详细' : '' }}
            </div>
        </template>


        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar" style="height:85vh">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
      
            >
                <el-form
                    v-if="!baTable.form.loading"
                    ref="formRef"
                    @submit.prevent=""
                    @keyup.enter="baTable.onSubmit(formRef)"
                    :model="baTable.form.items"
                    label-position="right"
                    :label-width="baTable.form.labelWidth + 'px'"

                >
                    <div>
                        <el-steps style="width: 100%" :active="4" align-center>
                            <el-step title="下单时间" description="2024.06.24 15:21" />
                            <el-step title="发货时间" description="2024.06.24 15:21" />
                            <el-step title="收货时间" description="2024.06.24 15:21" />
                            <el-step title="完成时间" description="2024.06.24 15:21" />
                        </el-steps>
                    </div>
                    <h4>订单信息</h4>
                    <table class="table">
                         <tr>
                             <td class="bg">订单号</td>
                             <td>{{ data.data.ordernum }}</td>
                             <td class="bg">流水号</td>
                             <td>{{ data.data.tradernum }}</td>
                             <td class="bg">订单金额</td>
                             <td><el-link :underline="false" type="danger">{{ data.data.money }}</el-link></td>
                             <td class="bg">实付金额</td>
                             <td>{{ data.data.shi_money }}</td>
                         </tr>
                         <tr>
                             <td class="bg">买家UID</td>
                             <td>{{ data.data.user_id }}</td>
                             <td class="bg">收货信息</td>
                             <td>{{ data.data.uname }}，{{ data.data.tel }}，{{ data.data.address }}</td>
                             <td class="bg">买家备注</td>
                             <td>{{ data.data.remarks }}</td>
                             <td class="bg">后台备注</td>
                             <td>{{ data.data.orderdes }}</td>
                         </tr>
                         <tr>
                             <td class="bg">是否支付</td>
                             <td>{{ data.data.is_pay == 1?'是':'否' }}</td>
                             <td class="bg">订单状态</td>
                             <td>
                                <el-tag :type="data.data.os.type">{{ data.data.os.name }}</el-tag>
                             </td>
                             <td class="bg">支付方式</td>
                             <td>微信支付</td>
                             <td class="bg">买家信息</td>
                             <td>{{ data.data.nickname }}</td>
                         </tr>
                         <tr>
                             <td class="bg">下单时间</td>
                             <td>{{ data.data.create_time }}</td>
                             <td class="bg">发货时间</td>
                             <td>{{ data.data.deliver_time }}</td>
                             <td class="bg">收货时间</td>
                             <td>{{ data.data.receive_time }}</td>
                             <td class="bg">完成时间</td>
                             <td>{{ data.data.complete_time }}</td>
                         </tr>
                    </table>
                    <h4>商品信息</h4>
                    <table class="table">
                         <tr>
                             <th>图片</th>
                             <th>商品</th>
                             <th>数量</th>
                             <th>单价</th>
                             <th>合计</th>
                         </tr>
                         <tr v-for="(item,index) in data.cart">
                             <td>
                                <el-imgage :src="item.pro_img"></el-imgage>
                             </td>
                             <td>{{ item.pro_title }}</td>
                             <td>{{ item.pro_num }}</td>
                             <td>¥{{ item.pro_price }}</td>
                             <td>¥{{ item.pro_price * item.pro_num}}</td>
                         </tr>
                         <tr>
                             <td colspan="4">
                                 总计：<span style="color:#ff0000">¥<text style="font-size: 16px;color:#ff0000">{{ data.data.money }}</text></span>
                             </td>
                         </tr>
                         
                    </table>

                    <h4>快递物流</h4>
                    <table class="table">
                         <tr>
                             <th>快递公司</th>
                             <th>快递单号</th>
                         </tr>
                         <tr>
                             <td>{{ data.data.order_status >= 1? data.data.logistics_company:'暂未发货' }}</td>
                             <td>{{ data.data.order_status >= 1? data.data.logistics_no:'暂未发货' }}</td>
                         </tr>  
                    </table>

                    <h4>订单日志</h4>
                    <table class="table" style="margin-bottom: 50px;">
                         <tr>
                             <th>时间</th>
                             <th>日志</th>
                         </tr>
                         <tr v-for="(item,index) in data.log">
                             <td>{{ item.time }}</td>
                             <td>{{ item.log }}</td>
                         </tr>  
                    </table>



                </el-form>
            </div>
        </el-scrollbar>

         


    </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, inject,onMounted,watch } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { ElForm, FormItemRule } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import internal from 'stream'
import { ElMessage } from 'element-plus'
import createAxios from "/@/utils/axios";


const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass
const { t } = useI18n()

const data = ref([])


watch(
    () => baTable.form.operate!, // 监听operate 以此判断编辑或者新增或其他
    (newVal) => {
       
        if(newVal == 'orderDetails'){
            console.log(baTable.form.items);
            baTable.form.loading = true
            return createAxios({
                url: '/admin/order.Order/details',
                method: 'get',
                params:{"id":baTable.form.items!.oid,'type':"game_type_des"}
            }).then(res => {
                    data.value = res.data
                    baTable.form.loading = false
            })
          
        }

    },
    { deep: true }
)


const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    gid: [buildValidatorData({ name: 'required', title: '所属游戏' })],

})

</script>
<style>
.aa{
   height: 90vh !important;
}
.table{
     border:1px solid #eee;
     width: 100%;
     border-collapse: collapse; /* 合并边框，消除间隙 */
}
.table th{
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;
}
.table td{
    border: 1px solid #eee;
    padding: 10px;
}
.table tr .bg{
    background-color: #f5f7fa;
    font-weight: bold;
    text-align: justify;
}
h4{
    margin-top:40px;
    margin-bottom: 10px;
    font-size: 17px;
}
</style>
